<template>
  <div class="dataExchangeContainer">
    <div class="headerBox flex align-center justify-between">
      <h3 class="flex align-center"><img src="/images/titleImg04.png" alt="">数据交换<span>实现安全高效的数据互联互通</span></h3>
      <a href="javascript:;" class="flex align-center">
        更多
        <i class="el-icon-d-arrow-right"></i>
      </a>
    </div>
    <div class="listBox">
      <ul v-if="list.length > 0">
        <vue-seamless-scroll :data="list" :class-option="classOption">
          <li v-for="(item,index) in list" :key="index" @click="jumpDetail(item)">
            <h3>{{ index + 1 }}、{{ item.title }}</h3>
            <span>
            {{ item.createTime }}
          </span>
          </li>
        </vue-seamless-scroll>
      </ul>
      <div class="noDataBox flex align-center justify-center" v-else>
        <el-empty description="暂无数据" :image-size="100"></el-empty>
      </div>
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
import {getExchangeList} from "@/api/compre/exchange";

export default {
  name: '',
  props: {},
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      classOption: {
        step: 1,
        singleHeight: 51,
      },
      list: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getExchangeAllList();
  },
  mounted() {
  },
  methods: {
    async getExchangeAllList() {
      const {code, rows} = await getExchangeList();
      if (code === 200) {
        this.list = rows;
      }
    },
    jumpDetail(item) {
      this.$tab.openPage("数据交换详情", `/portalWebsite/dataExchangeDetail/${item.id}`);
    }
  },
}
</script>
<style lang="scss" scoped>
.dataExchangeContainer {
  .headerBox {
    height: 70px;
    padding: 0 10px;

    h3 {
      color: #333;
      font-size: 24px;
      margin-bottom: 20px;
      margin-right: 40px;
      font-weight: bold;
      img{
        width: 30px;
        height: 30px;
        display: block;
        margin-right: 10px;
      }

      span {
        font-size: 14px;
        color: #9199a1;
        letter-spacing: .88px;
        line-height: 16px;
        font-weight: 400;
        margin-left: 28px;
        padding-top: 12px;
      }
    }

    a {
      font-size: 14px;
      color: #333;

      i {
        position: relative;
        top: 1px;
      }

      &:hover {
        color: #294098;

        i {
          color: #294098;
        }
      }
    }
  }

  .listBox {
    height: 255px;
    position: relative;

    ul {
      margin: 0;
      padding: 0;
      overflow: hidden;
      height: 255px;

      li {
        list-style: none;
        overflow: hidden;
        border-bottom: 1px solid #f1f1f1;
        padding: 0 10px;

        h3 {
          float: left;
          line-height: 50px;
          color: #333;
          font-size: 14px;
          margin: 0;
          padding: 0;
          width: calc(100% - 150px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        span {
          float: right;
          line-height: 50px;
          font-size: 12px;
          color: #999;
        }

        cursor: pointer;
        transition: all 0.2s;

        &:hover {
          -webkit-box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
          box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
          transform: translateY(-2px);
        }
      }
    }

    .noDataBox {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
}
</style>
